<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap">
    <link rel="stylesheet" href="css/styles.css">

    <script src="https://res.cdn.office.net/teams-js/2.23.0/js/MicrosoftTeams.min.js"
            integrity="sha384-08XJvrutoSVYTA8PQeUgetTKn8B7JE73C5BdAfWnHZ5WnSFFQO6g1FGmSqxsrAzb"
            crossorigin="anonymous"></script>
</head>
<body>
    <div class="page-wrapper">
        <div class="proposal-wrapper">
            <div class="about">
                The Axure Cloud connector notifies your team when there is activity on your Axure Cloud–hosted projects.
                Paste the webhook URL below into Axure Cloud to receive notifications in the <b id="channelName"></b> channel of the <b id="teamName"></b> team.
            </div>
        </div>
        <div class="configuration-wrapper">
            <div class="form-inline">
                <span class="label">Webhook URL</span>
                <input type="text" id="webhookUrl" readonly>
                <button id="copyUrlButton" title="Copy to Clipboard" onclick="handleCopyWebhookUrl()">Copy</button>
            </div>
        </div>
        <div class="instructions-wrapper">
            <div id="instructionsHeader" class="instructions-header" onclick="handleToggleInstructions()">
                <span class="header-icon">
                    <img class="caret-svg" src="images/caret.svg">
                </span>
                Instructions
            </div>
            <div class="instructions-body">
                <div class="step">
                    <div class="step-name">Step 1</div>
                    <div class="step-description">
                        <div>In Axure Cloud, open the account dropdown at the top-right of the page and select <strong>Notifications</strong>.</div>
                        <img class="step-image" src="images/step1.png">
                    </div>
                </div>
                <div class="step">
                    <div class="step-name">Step 2</div>
                    <div class="step-description">
                        <div>Under <strong>Microsoft Teams</strong>, click <strong>Add Teams Notification</strong>.</div>
                        <img class="step-image" src="images/step2.png">
                    </div>
                </div>
                <div class="step">
                    <div class="step-name">Step 3</div>
                    <div class="step-description">
                        <div>Paste the webhook URL from above into the dialog, and select the workspace or project for which you want to receive notifications.</div>
                    </div>
                </div>
                <div class="step">
                    <div class="step-name">Step 4</div>
                    <div class="step-description">
                        <div>Click <strong>Add</strong> to save the the new notification.</div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script>
        (async function setup() {
            var channelName = "";
            var teamName = "";

            //You always have to initialize the teams SDK first before being able to call any other method
            await microsoftTeams.app.initialize();

            var context = await microsoftTeams.app.getContext();
            channelName = context.channel?.displayName ?? "";
            teamName = context.team?.displayName ?? "";
            document.getElementById("channelName").innerText = channelName;
            document.getElementById("teamName").innerText = teamName;

            //By calling getSettings() you get (among other information) the webhook URL that you will use to POST messages into the channel
            var config = await microsoftTeams.pages.getConfig();
            document.getElementById("webhookUrl").value = config.webhookUrl;

            //This command enables the "Save" button (disabled by default)
            microsoftTeams.pages.config.setValidityState(true);

            //Specify what happens when the user clicks on "Save"
            microsoftTeams.pages.config.registerOnSaveHandler(async (saveEvent) => {
                var friendlyConfigName = "Get notifications from Axure Cloud in '" + channelName + "'";

                //Store some settings in the configuration of the connector
                await microsoftTeams.pages.config.setConfig({
                    //Important when referencing your connector from somewhere else within Teams
                    entityId: "AxureCloudConnector",
                    //This name will be shown to channel admins under "configured connectors" - Use something that helps admins to identify this specific connection
                    configName: friendlyConfigName,
                    //The URL to the configuration page for further config changes
                    contentUrl: window.location.href,
                });

                //You have to notify Teams that the saving process was successful, otherwise the save operation will time out and display an error
                saveEvent.notifySuccess();
            });
        })();

        function handleCopyWebhookUrl() {
            var buttonId = "copyUrlButton";
            var button = document.getElementById(buttonId);
            var buttonText = button.textContent;

            copyToClipboard("webhookUrl");

            button.textContent = "Copied";
            setTimeout(handleCopyWebhookUrlTimeout, 2000, buttonText, buttonId);
        }

        function handleCopyWebhookUrlTimeout(notifyMessage, elementId) {
            var el = document.getElementById(elementId);
            el.textContent = notifyMessage;
        }

        function copyToClipboard(elementId) {
            var copyText = document.getElementById(elementId);
            copyText.select();
            document.execCommand("copy");
        }

        function handleToggleInstructions() {
            var instructionsHeaderId = "instructionsHeader";
            var instructionsHeader = document.getElementById(instructionsHeaderId);
            var toggled = instructionsHeader.classList.toggle("expanded");
        }
    </script>
</body>
</html>